<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getSubmittedHomeworkAPI } from '@/api/student' // 假设这个API返回包含反馈信息的已提交作业列表
import dayjs from 'dayjs'
const feedbackList = ref([])
const loading = ref(false)

// 获取已提交作业及反馈列表
const getFeedbackList = async () => {
  loading.value = true
  try {
    const { data } = await getSubmittedHomeworkAPI() // 使用获取已提交作业的API
    if (data.code === 200) {
      feedbackList.value = data.data
    } else if (data.code === 500) {
      ElMessage.error(data.msg)
    }
  } catch (error) {
    console.error('获取反馈信息失败:', error)
    ElMessage.error('获取反馈信息失败')
  } finally {
    loading.value = false
  }
}

// 格式化提交日期（时间戳转日期）
const formatTimestamp = (timestamp, format = 'YYYY-MM-DD HH:mm:ss') => {
  if (!timestamp || isNaN(timestamp)) return 'Invalid Timestamp';

  return dayjs(timestamp).format(format);
}

onMounted(() => {
  getFeedbackList()
})
</script>

<template>
  <div class="view-feedback-container">
    <h2>我的作业反馈</h2>

    <el-table v-loading="loading" :data="feedbackList" style="width: 100%">
      <el-table-column label="作业序号" type="index" width="100" />
      <el-table-column prop="title" label="作业标题" width="150" />
      <el-table-column prop="feedback" label="教师反馈" />
      <el-table-column prop="grade" label="成绩" width="100" />
      <el-table-column prop="description" label="教师评语" />
      <el-table-column label="提交日期" width="200">
        <template #default="scope">
          {{ formatTimestamp(scope.row.submitDate) }}
        </template>
      </el-table-column>
      <el-table-column label="截止日期" width="200">
        <template #default="scope">
          {{ formatTimestamp(scope.row.dueDate) }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>


<style scoped>
.view-feedback-container {
  padding: 20px;
}

h2 {
  margin-bottom: 20px;
}
</style>